<template>
  <div>
    <SupInput
      :InpList="inpList"
      :BtnList="btnList"
      :selList="selList"
      @clickFn="btnFn"
    >
    </SupInput>
    <Suptable
      :headerData="headerData"
      :tableData="tableData"
      :isPage="true"
      :border="true"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="pagenum"
      :pagesizeList="fenye"
      :pagesize="pagesize"
      :isTag="true"
      :TagName="TagName"
    >
      <template v-slot:tagSlot="{ row }">
        <el-tag :type="row.row.apptype == '审批通过'
                  ? 'success'
                  : row.row.apptype == '待审批'
                  ? 'info'
                  : row.row.apptype == '审批拒绝'
                  ? 'danger':''">{{ row.row.apptype }}</el-tag>
      </template>
      <template v-slot:opera="{ row }">
        <el-button type="primary" @click="goEdit(row.row)" size="small"
          :disabled=" row.row.apptype == '待审批'? false:true ">审批</el-button
        >
        <el-button type="danger" @click="godelete(row.row.id)" size="small"
          >删除</el-button
        >
      </template>
    </Suptable>
    <div>
      <el-dialog title="提现申请" :visible.sync="dialogVisible" width="30%">
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="审批状态" prop="apptype">
              <el-radio-group v-model="ruleForm.apptype">
                <el-radio label="通过"></el-radio>
                <el-radio label="拒绝"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批备注" prop="status">
              <el-input v-model="ruleForm.status"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { MoneyList, detMoney, editMoney, queryList } from "@/api/moneyMock.js";
import Suptable from "@/components/Suptable";
import SupInput from "@/components/SupInput";
export default {
  name: "Money",
  data() {
    return {
      dialogVisible: false,
      pagenum: 1,
      pagesize: 10,
      total: 0,
      fenye: [5, 10, 15, 20],
      tableData: [],
      value: [],
      TagName:"审批状态",
      inpList: [
        {
          text: "请输入用户名",
          model: "", //输入框绑定的value值
        },
        {
          text: "请输入有手机号",
          model: "",
        },
      ],
      btnList: [
        {
          icon: "el-icon-search",
          name: "查找",
        },
      ],
      selList: [
        {
          title: "请选择审批状态",
          value: [],
          options: [
            // 0通过  1拒接 2待审批
            {
              value: "0",
              label: "审批通过",
            },
            {
              value: "1",
              label: "审批拒接",
            },
            {
              value: "2",
              label: "待审批",
            },
          ],
        },
      ],
      headerData: [
        {
          prop: "id",
          label: "记录ID",
        },
        {
          prop: "traceSn",
          label: "申请流水",
          width: "160",
        },
        {
          prop: "type",
          label: "类型",
        },
        {
          prop: "userId",
          label: "用户编号",
        },
        {
          prop: "phone",
          label: "手机号码",
          width: "150",
        },
        {
          prop: "amount",
          label: "提现金额",
        },
        {
          prop: "totalAmount",
          label: "已提总额",
        },
        // {
        //   prop: "apptype",
        //   label: "审批状态",
        // },
        {
          prop: "status",
          label: "审批备注",
        },
      ],
      appId: "",
      ruleForm: {
        status: "",
        apptype: "",
      },
      rules: {
        status: [
          { required: false, message: "请输入审批备注", trigger: "blur" },
        ],
        apptype: [
          { required: true, message: "请选择审批状态", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    let _self = this;
    _self.moneyList();
  },
  methods: {
    goEdit(row) {
      let _self = this;
      _self.appId = row.id;
      _self.dialogVisible = true;
    },
    submitForm(formName) {
      let _self = this;
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          let { status, apptype } = _self.ruleForm;
          let data = {
            id: _self.appId,
            status,
            apptype: apptype == "通过" ? 0 : 1,
          };
          editMoney(data).then((res) => {
            // console.log(res);
            _self.dialogVisible = false;
            _self.moneyList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    godelete(id) {
      let _self = this;
      _self
        .$confirm("确定删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let data = { id };
          detMoney(data).then((res) => {
            // console.log(res);
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功",
              });
              _self.moneyList();
            } else {
              _self.$message({
                type: "info",
                message: "res.meta.msg",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pagesize = val;
      _self.moneyList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.pagenum = val;
      _self.moneyList();
    },
    moneyList() {
      let _self = this;
      let data = {
        pagenum: _self.pagenum,
        pagesize: _self.pagesize,
      };
      MoneyList(data).then((res) => {
        // console.log(res);
        let _self = this;
        _self.tableData = [];
        for (let item of res.data.user) {
          let moneyData = {
            id: item.id,
            userId: item.userId,
            phone: item.phone,
            type: item.type == 0 ? "用户申请" : "系统结算",
            amount: "￥" + item.amount,
            totalAmount: "￥" + item.totalAmount,
            traceSn: item.traceSn,
            apptype:
              item.apptype == 0
                ? "审批通过"
                : item.apptype == 1
                ? "审批拒绝"
                : "待审批",
            status: item.status,
          };
          _self.tableData.push(moneyData);
        }
        _self.total = res.data.total;
        _self.pagenum = res.data.pagenum;
      });
    },
    btnFn() {
      let _self = this;
      let data = {
        username: _self.inpList[0].model,
        phone: _self.inpList[1].model,
        apptype: _self.selList[0].value,
      };
      queryList(data).then((res)=>{
        // console.log(res);
        if(res.meta.status == 200){
           _self.tableData = [];
          for (let item of res.data.arr) {
            let moneyData = {
              id: item.id,
              userId: item.userId,
              phone: item.phone,
              type: item.type == 0 ? "用户申请" : "系统结算",
              amount: "￥" + item.amount,
              totalAmount: "￥" + item.totalAmount,
              amount:'￥'+ item.amount,
              totalAmount:'￥'+  item.totalAmount,
              traceSn: item.traceSn,
              apptype:
                item.apptype == 0
                  ? "审批通过"
                  : item.apptype == 1
                  ? "审批拒绝"
                  : "待审批",
              status: item.status,
            };
            _self.tableData.push(moneyData);
            _self.pagesize = res.data.pagesize;
            _self.total = res.data.total;
          }
        }else{
          _self.pagesize = 10;
          _self.moneyList();
        }
      });
    },
  },
  components: { Suptable, SupInput },
};
</script>